<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SoundManager 2 Tutorial: Getting Started</title>
<meta name="robots" content="noindex" />
<meta name="description" content="SoundManager 2 tutorial, example code, how to get started guide including and configuring SoundManager 2 for playing MP3 audio via Javascript." />
<meta name="keywords" content="soundmanager2 tutorial, javascript sound, javascript audio, javascript play mp3, javascript sound control, mp3, mp4, mpeg4" />
<meta name="robots" content="all" />
<meta name="author" content="Scott Schiller" />
<meta name="copyright" content="Copyright (C) 1997 onwards Scott Schiller" />
<meta name="language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="../../demo/index.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../troubleshoot/debug.css" />
<script type="text/javascript" src="../../script/soundmanager2.js"></script>
<script type="text/javascript" src="../../demo/index.js"></script>
<script type="text/javascript">
soundManager.setup({
  url: '../../swf/',
  useFlashBlock: true,
  consoleOnly: false,
  bgColor: '#f6f6f6',
  debugMode: true,
  // enable flash debug output for this page
  debugFlash: true,
  preferFlash: true
});
</script>
<script type="text/javascript" src="../../troubleshoot/debug.js"></script>
</head>

<body>
	
<div id="content">

 <div id="top">

  <h1>SoundManager 2: Getting Started</h1>

	<div id="nav">
	 <ul>

	  <li>
	   <a href="../../">Home</a>
	  </li>

	  <li>
	   <a href="#">Demos</a>
	   <ul>
		<li><a href="../../demo/template/">Basic Template</a></li>
		<li><a href="../../demo/api/">API Examples</a></li>
	    <li><a href="../../demo/play-mp3-links/" class="exclude">Playable MP3 links</a></li>
	    <li><a href="../../demo/mp3-player-button/" class="exclude">Basic MP3 Play Button</a></li>
		<li><a href="../../demo/page-player/">Muxtape-style UI</a></li>
		<li><a href="../../demo/360-player/">360&deg; Player UI</a></li>
	    <li><a href="../../demo/mpc/">Drum Machine (MPC)</a></li>
		<li><a href="../../demo/animation/">DOM/Animation Demos</a></li>
		<li><a href="../../demo/flashblock/">FlashBlock Handling</a></li>
	   </ul>
	  </li>

	  <li>
	   <strong><a href="../getstarted/">Getting Started</a></strong>
	   <ul>
		<li><a href="../getstarted/#how-sm2-works">How SoundManager 2 works</a></li>
		<li><a href="../getstarted/#basic-inclusion">Including SM2 on your site</a></li>
		<li><a href="../getstarted/#troubleshooting">Troubleshooting</a></li>
	   </ul>
	  </li>

	  <li>
	   <a href="..">Documentation</a>
	   <ul>
		<li><a href="../#sm-config">SoundManager Properties</a></li>
		<li><a href="../#sound-object-properties">Sound Object Properties</a></li>
		<li><a href="../#smdefaults">Global Sound Defaults</a></li>
		<li><a href="../#api">SoundManager Core API</a></li>
		<li><a href="../#smsoundmethods">Sound Object (SMSound) API</a></li>
		<li><a href="../generated/script/soundmanager2.html">Generated Documentation</a></li>
	   </ul>
	  </li>
	
	  <li>
	   <a href="../download/">Download</a>
	   <ul>
		<li><a href="../download/#latest">Get SoundManager 2</a></li>
		<li><a href="../download/#revision-history">Revision History</a></li>
	   </ul>
	  </li>
	
	  <li>
	   <a href="../technotes/">Technical Notes</a>
	   <ul>
		<li><a href="../technotes/#requirements">System Requirements</a></li>
		<li><a href="../technotes/#debug-output">Debug + Console Output</a></li>
	   </ul>
	  </li>

	  <li>
	   <a href="../resources/">Resources</a>
	   <ul>
		<li><a href="../resources/#licensing">Licensing</a></li>
		<li><a href="../resources/#related">Related Projects</a></li>
		<li><a href="http://getsatisfaction.com/schillmania/products/schillmania_soundmanager_2/">SM2 support / discussion</a></li>
		<li><a href="http://www.schillmania.com/content/react/contact/">Contact Info @ Schillmania.com</a></li>
	   </ul>
	  </li>

	 </ul>
	 <div class="clear"></div>
	</div>
	
 </div>

 <div id="main-wrapper">

 <div id="main" class="triple">

		<div class="columnar">
			<div class="c1">
				<h2>How SoundManager Works</h2>
				<p>It starts out easy, but you can go down the rabbit hole if you want.</p>
			</div>
			
			<div class="c2">
				
				<div class="f-block">

				 <!--
				 <p style="margin-top:1px"><strong><strong>SoundManager 2 makes it easier to play MP3 audio cross browser / platform, using Javascript.</strong></strong></p>
			 -->
			
				 <h3>SoundManager 2 Tutorial: What, Why, How</h3>
			
				 <p><strong>Problem:</strong> Browsers lack good, consistent native audio support. (HTML 5's <code>Audio()</code> is the future, but is still in development.)</p>
				 <p><strong>Solution:</strong> Javascript API using HTML5 Audio() + headless Flash via ExternalInterface, works almost everywhere. If HTML5 is supported but "non-free" MP3/MP4 formats are not, flash can be used as a fallback.</p>
				 <p>SoundManager 2 wraps and extends both the HTML Audio and Flash Audio APIs, providing a single, unified sound API to Javascript; the API is consistent regardless of the technology working under the hood to play sound. (The flash portion is hidden, transparent to both developers and end users.)</p>

				</div>

			  <div class="f-block c-basic-use">


			  <h4 id="basic-inclusion">Including SoundManager 2</h4>

			  <p>The soundmanager2.js core can get down to 11 KB over the wire, depending on what version you use. A few versions of the SM2 script are available, balancing code size between commented, debug-enabled and production-optimized builds.</p>
			  <p>Regardless of which build you use, take advantage of <a href="http://developer.yahoo.com/performance/rules.html#gzip" title="Best Practices for Speeding Up Your Web Site (Yahoo Developer Network)">gzip compression</a> on your server for big savings. As shown below, SoundManager 2 compresses quite well with gzip; the full debug-enabled version served <i>with</i> gzip is smaller than even the minified, no-debug version served without.</p>
			
			  <table id="sm2-filesizes" cellpadding="0" cellspacing="0">

			   <tr>
			    <th>Build version</th>
			    <th>Recommended use</th>
			    <th class="nw">File size</th>
			    <th class="nw">+ <a href="https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess" title="Friends don't let friends run websites without gzip!">gzip</a></th>
			   </tr>

			   <tr>
				 <td>
				  <p>Original, formatted debug-enabled version with comments. Passes <a href="http://jslint.com" title="jslint, the JavaScript code quality tool.">jslint</a>.</p>
				  <pre>&lt;script src="<span>soundmanager2.js</span>"&gt;&lt;/script&gt;</pre>
				 </td>
				 <td>Development, testing, debugging</td>
				 <td class="nw">144 KB</td>
				 <td class="nw">38 KB</td>
			   </tr>

			   <tr>
				 <td>
				  <p>"No-debug", formatted (comments removed, whitespace retained) version</p>
				  <pre>&lt;script src="<span>soundmanager2-nodebug.js</span>"&gt;&lt;/script&gt;</pre>
				 </td>
				 <td>Production, "clean" no-debug code</td>
				 <td class="nw">75 KB</td>
				 <td class="nw">16 KB</td>
			   </tr>

			   <tr>
				 <td>
				  <p>Minified (Google Closure Compiler-munged, no comments or whitespace), debug-enabled version</p>
				  <pre>&lt;script src="<span>soundmanager2-jsmin.js</span>"&gt;&lt;/script&gt;</pre>
				 </td>
				 <td>Production, with debug code</td>
				 <td class="nw">49 KB</td>
				 <td class="nw">16 KB</td>
			   </tr>

			   <tr>
				 <td>
				  <p>Build-script optimized, minified, no-debug version</p>
				  <pre>&lt;script src="<span>soundmanager2-nodebug-jsmin.js</span>"&gt;&lt;/script&gt;</pre>
				 </td>
				 <td>Production-optimized, debug code removed</td>
				 <td class="nw">34 KB</td>
				 <td class="nw booyaa" title="Best-case scenario for load time/performance">11 KB!</td>
			   </tr>

			  </table>
			
			  <p>You then need to tell SM2 where to find the flash .SWF it will need (depending on HTML5 support), and optionally what version of Flash (~2.8 KB for flash 8, and ~8.5 KB for flash 9) depending on what API features you want:</p>

<pre class="block"><code>&lt;script&gt;
soundManager.setup({
  url: '<span>/path/to/swf-files/</span>',
  flashVersion: 9, <span><span>// optional: shiny features (default = 8)</span></span>
  useFlashBlock: false, <span><span>// optionally, enable when you're ready to <a href="../../demo/flashblock/" title="SoundManager 2 flash block handling demo">dive in</a></span></span>
  <span><span>/**
   * read up on <a href="../#soundmanager-usehtml5audio">HTML5 audio support</a>, if you're feeling adventurous.
   * iPad/iPhone and devices without flash installed will always attempt to use it.
   */</span></span>
  onready: function() {
    <span><span>// Ready to use; <a href="../#soundmanager-createsound">soundManager.createSound()</a> etc. can now be called.</span></span>
  }
});
&lt;/script&gt;</code></pre>

<p>If you plan to eventually use the flash block handling feature (disabled in this example), you'll want to look at the <a href="../../demo/flashblock/" title="SoundManager 2 flash block handling demo">flash block demo</a> and include the relevant CSS it uses.</p>



				<h4 id="basic-template">Basic SoundManager Template</h4>

				<p>For a live example of a page including SoundManager 2, check the <a href="../../demo/template/" title="SoundManager 2 template example" onclick="checkDomain(this)">bare-bones template</a>.</p>
			
			  <h4 id="file-structure">SoundManager File Structure</h4>
			  <p>Or, "What you get when you download SM2."</p>
			  <p>The core audio API bits require <code>script/soundmanager2.js</code> and the SWF files <code>swf/soundmanager2.swf</code> and <code>swf/soundmanager2_flash9.swf</code>, as well as the <code>_debug</code> versions of the SWFs. The flash 9 SWF enables some extra API features, and is only used if you set <code>soundManager.flashVersion = 9</code> (the default is 8.)</p>

			  <ul class="file-structure">
			   <li>
				soundmanager2/
				<ul>
				 <li>
				  demo/ <span>- Examples, MP3 player UIs etc.</span>
				 </li>
				 <li>
				  doc/ <span>- API method documentation, notes, troubleshooting</span>
				 </li>
				 <li class="core">
				  script/ <span>- API core, soundmanager2.js</span>
				 </li>
				 <li>
				  src/ <span>- AS2/AS3 Flash source used to build SWFs (for flash development)</span>
				 </li>
				 <li class="core">
				  swf/ <span>- API core, SoundManager 2 .SWF files</span>
				 </li>
			     <li>
				  troubleshoot/ <span>- Tool for finding/fixing startup issues</span>
				 </li>
				</ul>
			   </li>
			  </ul>

<h4 id="tech-architecture">How SoundManager 2 Really Works</h4>

<p>SoundManager 2 is the result of Javascript talking to a hidden Flash movie. The Flash layer is not something you have to work with directly, but it is the component which makes audio control possible behind the scenes.</p>

<div class="figure">

 <div class="code">
  <span>soundmanager2.js</span> <span class="mid">&lt;- Flash + ExternalInterface, and/or HTML5 Audio() -&gt;</span> <span class="mid">&lt;- HTTP -&gt;</span> <span>audio file</span>
 </div>

</div>

<p>Flash can expose methods to Javascript via ExternalInterface, allowing bi-directional calls to be made and thus providing additional functionality to Javascript.</p>

<p>For the real gory details on the behind-the-scenes action of JS + Flash, see <a href="http://www.schillmania.com/content/entries/2010/how-soundmanager2-works/" title="How SoundManager 2 works (JS + ExternalInterface + Flash)">How SoundManager 2 Works</a> on schillmania.com.</p>


			  </div>
			
			  <div class="f-block f-onload">

			  <h4>Startup / Initialization</h4>
			
			  <p>In brief, here is now SM2 starts up:</p>
			  <ul>
				<li>soundmanager2.js loads</li>
				<li>new SoundManager() constructor call, event listeners attached for dom ready/init</li>
				<li>document.createElement('embed') (or 'object' for IE), append Flash .SWF to document</li>
				<li>SWF loads, Flash makes call to JS function: "Hi, JS!"</li>
				<li>JS -&gt; Flash test (JS calls Flash function): "Hello, Flash!"</li>
				<li>-- startup is complete, soundManager.onready() fires --</li>
			  </ul>
			
			  <p class="in">A single Javascript include will link in all of the required code for the library, which will automatically begin loading either at <code>onDOMContentLoaded()</code> if supported, or alternately, after <code>window.onload()</code> (eg., IE 6 and others.) The default behaviour is to start "as soon as possible", but the library can be configured to wait for <code>window.onload()</code> in all cases as well. Loading and initialisation are separate events.</p>

			  <p class="in">Once initialised, SM2 will call event handlers/listeners registered via <code>soundManager.onready()</code>. There are also "old-skool" onload()/onerror() event handlers which you can define just as you would with <code>window.onload()</code>.</p>
			
			  <p>If you want to lazy-load or defer SM2, see <a href="#lazy-loading" title="Lazy-loading SM2 and SM2_DEFER object">Lazy-loading and SM2_DEFER</a>.</p>
			
			  <h4>SoundManager onready() / ontimeout() Event Handlers</h4>
			
			<p><code>onready()</code> is a flexible method that can be used to queue numerous listeners for SM2's successful start-up. Simply pass a callback function, which will be called when SM2 has successfully started:</p>

<pre class="block"><code>soundManager.onready(function() {
    <span><span>// SM2 is ready to go!</span></span>
    makeSomeNoise(); <span><span>// soundManager.createSound(), etc.</span></span>
});</code></pre>

			<p><code>ontimeout()</code> is used to add listeners for SM2 init failures, which can happen due to missing or blocked Flash support. They are not necessarily fatal as in the flash block case, where <code>onready()</code> calls can follow <code>ontimeout()</code> if the user unblocks flash after a failed init attempt.</p>

<pre class="block"><code>soundManager.ontimeout(function() {
    <span><span>// SM2 could not start. Flash blocked, missing or security error? Complain, etc.?</span></span>
});</code></pre>

			  <h4 id="lazy-loading">Lazy-loading / Dynamically-loading SM2 on-the-fly</h4>

			  <p>Let's say you wanted to load and start SM2 after your page has loaded, using JavaScript to insert a script node etc., or otherwise only start SM2 conditionally. You can load the library dynamically (at or after <code>DOMContentReady</code>), and it will not attempt to init until you call <code>setup()</code> with a <code>url</code> parameter.</p>
			  <p>Example:</p>
				
<pre class="block"><code>function loadSM2() {
  <span><span>// -- load soundmanager2.js via &lt;script&gt;, createElement('script') or XHR etc. --
  // imaginary loadJS() function with callback ...</span></span>
  loadJS('<span>/path/to/soundmanager2.js</span>', function() {
    <span><span>// once soundmanager2.js has loaded, call <a href="../#soundmanager-setup">soundManager.setup()</a>.</span></span>
    soundManager.setup({
      url: '<span>/path/to/swfs/</span>',
      onready: function() {
        <span><span>// soundManager.createSound() etc. here</span></span>
      }
    });
  });
}</code></pre>

			  <p>For a live demo, check out the <a href="../../demo/template/deferred-example.html" title="SoundManager 2 deferred loading example">deferred loading example</a>.</p>

			  </div>

				
			</div>
			
		</div>

				<div class="columnar">

					<div class="c1">
						<h2>Sound Options Object Format</h2>
						<p>Object Literal, JSON-style data passed to <code>createSound()</code> and <code>play()</code></p>
					</div>

					<div class="c2">

						  <div class="f-block s-onload"> <!-- f-createsound s-sid s-url s-autoload s-autoplay s-onload -->

						  <h3 id="object-literal-format">Object Literal Format</h3>

						  <p>Sounds can be created with instance-specific parameters in an object literal (JSON-style) format, where omitted parameters inherit default values as defined in soundManager.</p>

<pre class="block"><code>soundManager.createSound({
  id: '<span>mySound</span>',
  url: '<span>/path/to/some.mp3</span>',
  autoLoad: <span>true</span>,
  autoPlay: <span>false</span>,
  onload: <span>function() {
    alert('<span>The sound </span>'+<span>this.id</span>+'<span> loaded!</span>');
  }</span>,
  volume: <span>50</span>
});</code></pre>

						  <p>This object can also be passed as an optional argument to the <code class="in">play</code> method, overriding options set at creation time.</p>

						  <p>For a full list of available options, see <a href="../#sound-properties" title="SoundManager 2 API info: Sound Properties" onclick="resetFilter()">Sound Properties Object</a></p>

						  </div>


					</div>

				</div>
		
		<div class="columnar">
			<div class="c1">
				<h2>"Use Responsibly"</h2>
				<p>Only you can prevent audio pollution?</p>
			</div>
			
			<div class="c2">
				
			  <div class="f-block">

			  <h3>A Word Of Vice</h3>
			  <p>Not every button, link, element or paragraph on the web needs to zoom, move, change colour <em>and</em> be noisy, repetitive and annoying all at the same time. Use your own discretion!</p>
			  <p>Sites which automatically start playing background sound, and/or don't have volume or mute controls are the kind of things you should avoid building. As a developer, gentle reader, you may eventually find yourself in such a situation. Please do your part in enhancing the web with sound if you use SM2, while at the same time keeping it audibly usable. :)</p>

			  </div>
				
			</div>

		</div>
		
		<div id="troubleshooting" class="columnar">

			<div id="troubleshooting-flash8" class="c1">
				<h2 id="troubleshooting-flash9">Troubleshooting</h2>
				<p>Console-style messaging, useful for troubleshooting start-up and runtime issues.</p>
			</div>
			
			<div id="troubleshooting-flash9-highperformance" class="c2">

				<h3>SoundManager 2 Start-up and Debug Tools</h3>
				<p>This troubleshooting tool can come in handy for debugging SM2 start-up problems.</p>

				<p class="note">Flash options: <a href="#troubleshooting-flash8" onclick="window.location.replace(this.href);window.location.reload()">Flash 8</a> (default), <a href="#troubleshooting-flash9" onclick="window.location.replace(this.href);window.location.reload()">Flash 9</a> (normal) or <a href="#troubleshooting-flash9-highperformance" onclick="window.location.replace(this.href);window.location.reload()">Flash 9 + highPerformance + fastPolling</a> modes.</p>

				<div id="sm2-test">
				 <ul class="items">

				  <li id="d-onload" class="default">
				   <h3><span class="yay">OK</span><span class="boo">FAIL</span><span class="default">N/A</span><span class="unknown">Unknown</span><span>SoundManager 2 start-up</span></h3>
				   <div id="sm2-startup" class="details">
				    <p>soundManager onready() or ontimeout() events are ultimately called when start-up completes.</p>
				    <p>If you're seeing a failure, refer to the below for troubleshooting details for common causes.</p>
				   </div>
				  </li>

				  <li id="d-hasflash" class="default">
				   <h3><span class="yay">OK</span><span class="boo">Error</span><span class="default">N/A</span><span class="unknown">Unknown</span><span>Flash</span></h3>
				   <div class="details">
				    <p>Flash 8 or 9 may be required for SoundManager 2 to start, depending on HTML5 support. You are currently using <b id="d-flashversion">[unknown]</b>.</p>
				   </div>
				  </li>

				  <li id="d-swf" class="default">
				   <h3><span class="yay">OK</span><span class="boo">Error</span><span class="default">N/A</span><span class="unknown">Unknown</span><span>Flash SWF</span></h3>
				   <div class="details">
				    <p>SoundManager 2 must load a flash movie before initialisation can proceed. If you have errors here, check that soundManager.url is correctly defined and that the URL being loaded is correct.</p>
				   <p>If the Flash movie URL is OK, Flash security or flash blockers are the likely cause. Check the section below.</p>
				   </div>
				  </li>

				  <li id="d-flashtojs" class="default">
				   <h3><span class="yay">OK</span><span class="boo">Error</span><span class="default">N/A</span><span class="unknown">Unknown</span><span>Flash -&gt; JS</span></h3>
				   <div class="details">
				    <p>Once the flash component of SM2 has loaded, it tries to make a call to Javascript-land. This is a common point of failure, for security reasons.</p>
				    <ul>
					 <li>
						<p><b>Have a flash blocker?</b> Check that the <a href="#flashdebug">SM2 flash movie</a> (below) is loading and is not being blocked.</p>
					</li>
				     <li>
					First time opening SM2 after downloading it? Is your browser URL at file:// or c:/path/ or otherwise not using HTTP? Flash security "whitelisting" is required to allow Flash + JS to work when offline, placing it in the "LocalTrusted" Flash security sandbox rather than "localWithFile".
					
				    <div id="d-flashtojs-offline" style="padding-bottom:1em">
				     <h4>Offline viewing: Adding a "trusted location" to the Flash Security Settings Panel</h4>
				     <p>The Flash Player Global Security Settings Panel is a web-based control panel which allows you to configure Flash security. You will need to add the path of the SoundManager 2 project in order for it to work "offline" (ie., when viewing via file:// or c:/)</p>
				     <p id="ss"><a href="#screenshots" onclick="document.getElementById('ss-box').style.display = 'block';document.getElementById('ss').style.display='none';return false">Show me how</a>: Adding a "trusted location"</p>
				     <div id="ss-box" style="display:none">
					  <h4>Illustrated guide: Adding a "trusted location" in Flash</h4>
				      <p>Below: Adding a location, and selecting "Browse for folder" (or directory), to whitelist the SoundManager 2 project directory for offline viewing.</p>
				      <p><img src="../../troubleshoot/fpgss-add-location.png" alt="Adding a location: Browse for the file or directory to whitelist" style="width:100%;_width:auto;min-width:72px;max-width:396px" /></p>
				      <p><img src="../../troubleshoot/fpgss-added-location.png" alt="Whitelisted location has now been added, JS + Flash will work under this path" style="width:100%;_width:auto;min-width:72px;max-width:396px" /></p>
				     </div>
				     <p><a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html" target="_blank" class="feature">Launch the Flash Security Settings Panel</a></p>
				    </div>
					
					 </li>
				     <li style="margin-top:0.5em">Flash blockers (FlashBlock, "click to flash" etc.) preventing flash load and start-up - need whitelisting/"allow this domain" to work smoothly. If you suspect blocking is the issue, try the <a href="../../demo/flashblock/">SoundManager 2 Flashblock demo</a>.</li>
				     <li style="margin-top:0.5em">Online viewing (HTTP/S): Same-domain security rules apply to HTML + Flash content by default (crossdomain.xml/allowDomain() in .AS source required to override.)</li>
				    </ul>
				    <p>See <a href="#flashdebug" title="SoundManager 2 flash debug output">Flash debug output</a> for more security error details.</p>

				    <div id="d-flashtojs-online">
					 <h4>Online viewing: Cross-domain security restrictions</h4>
				     	 <p>HTML page on domain A loading .SWF from domain B: Flash security prevents JS + Flash when a cross-domain XML permission file is not available on domain B, and/or flash movie was not compiled with allowDomain('domainA') or allowDomain('*') - note that the SWF distributed with SM2 does not use this by default; try using the cross-domain version of the SWF, or compile your own which whitelists your own domain(s).</p>

					 <h4>Flash Blockers</h4>
					 <p>Browser extensions/add-ons like "FlashBlock" and "click to flash" can prevent the .SWF from loading, and this will mean SM2 will time-out and fail waiting for a response from Flash. For development, it's best to whitelist the domain(s) or the .SWF for SM2 to allow it to work.</p>
					 <p>Have a flash blocker installed? Want to test it? Try the <a href="../../demo/flashblock">SoundManager 2 Flashblock demo</a>.</p>

				    </div>

				   </div>
				  </li>

				  <li id="d-jstoflash" class="default">
				   <h3><span class="yay">OK</span><span class="boo">Error</span><span class="default">N/A</span><span class="unknown">Unknown</span><span>JS -&gt; Flash</span></h3>
				   <div class="details">
				    <p>At this point, Javascript attempts to respond to Flash's initial outgoing Flash -&gt; JS call, completing the test for JS/flash communication. If SM2 does not receive a response from flash, it will eventually fail.</p>
				    <p>Offline viewing conditions and cross-domain security rules will prevent Flash &lt;-&gt; JS communication. See the details of Flash -&gt; JS for information.</p>
				    <p><b>Special Firefox Note</b>: Some versions of Firefox (9.0 and newer?) may break JS/Flash in the file:// or offline case even when the path has been whitelisted in the Flash player security settings panel. IE, Chrome, Safari and Opera do not have this issue.</p>
				   </div>   
				  </li>

				  <li id="d-soundtest" class="default">
				   <h3><span class="yay">OK</span><span class="boo">Error</span><span class="default">N/A</span><span class="unknown">Unknown</span><span>Sound test</span></h3>
				   <div class="details">
				    <p>Here, a simple createSound() call is made to test SM2's actual operation. A sound should load and play provided SM2 was able to start successfully.</p>
				   </div>
				  </li>

				 </ul>
				</div>
			
				<p>Flash detection code from <a href="http://www.featureblend.com/javascript-flash-detection-library.html" title="Javascript flash detection library">Flash Detect</a> (featureblend.com)</p>

				<h3 id="flashdebug">Flash Movie Debug Output</h3>
				<p>When <code>soundManager.debugFlash = true</code>, Flash will write debug info as text to the flash movie. This can be helpful for troubleshooting Flash/JS issues when timeouts or security errors are involved which prevent Flash from talking to Javascript, potentially hiding useful debug information. A CSS class of <code>flash_debug</code> will also be appended to the Flash <code>#sm2-container</code> DIV element when enabled, if you wish to style it differently.</p>
				<p>You can also specify ?debug=1 in the URL to the SWF, and it will write debug output. Try <a href="../../swf/soundmanager2_debug.swf?debug=1" title="Test debug output" class="norewrite">soundmanager2_debug.swf?debug=1</a>, or <a href="../../swf/soundmanager2_flash9_debug.swf?debug=1" title="Test debug output, Flash 9" class="norewrite">soundmanager2_flash9_debug.swf?debug=1</a>.</p>

				<div id="sm2-container">
					<!-- flash movie with debug output goes here -->
				</div>

				<h3>Live Debug Output</h3>
				<p>SoundManager 2 relies on Javascript and Flash communicating via ExternalInterface, and this is subject to a number of timing, loading and browser security conditions. Because of this complexity, debug information is essential for troubleshooting start-up, loading, initialization and error conditions between Flash and Javascript.</p>
				<p class="in">With debug mode enabled via <code>debugMode = true</code>, SM2 can write helpful troubleshooting information to javascript <code>console.log()</code>-style interfaces. Additionally, output can be written to an optional DIV element with the ID of "<code>soundmanager-debug</code>".</p>
				<p>If loading from the local filesystem (offline eg. file://, not over HTTP), Flash security is likely preventing SM2 from talking to Javascript. You will need to add this project's directory to the trusted locations in the <a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html">Flash global security settings panel</a>, or simply view this page over HTTP.</p>
				<p>Below is a live example of debug output.</p>
				<div id="live-debug" class="block">
				 <div id="soundmanager-debug" class="code">
				  <!-- live debug goes here -->
				 </div>
				</div>
				<p>For more examples of live debug output, see the <a href="../../demo/template/" title="Basic SoundManager 2 template">Basic Template</a>, <a href="../../demo/api/" title="API demo">API demo</a> and other demos in the top navigation.</p>

				<h3>Standalone version of troubleshooting tool</h3>
				<p class="in">For debugging your development/production environment with this widget, see the <a href="../../troubleshoot/" title="SoundManager 2: Standalone debug widget">troubleshooting</a> subdirectory of the SoundManager 2 package.</p>

			</div>
			
		</div>

	<div id="col3" class="c3">

	  <div id="support-wrapper">
		  <div id="get-satisfaction" class="box">
		   <div id="gsfn_list_widget">
		    <h2><a href="http://getsatisfaction.com/schillmania/products/schillmania_soundmanager_2/" title="User discussion, FAQs and support for SoundManager 2" rel="nofollow">Discussion / Support</a><span class="l"></span><span class="r"></span></h2>
		    <div id="gsfn_content"></div>
		    <div class="powered_by"><a href="http://getsatisfaction.com/" rel="nofollow">Get Satisfaction support network</a></div>
		   </div>
		  <!-- /.box -->
	  </div>

	</div>

 <div id="shortcuts">

 </div>

	</div>
	
	<div class="clear"></div>

 <!-- /main -->
 </div>

 <!-- /main-wrapper -->
 </div>

 <!-- /content -->
 </div>

<script type="text/javascript">
init();
sm2DebugInit();
</script>
	
</body>

</html>
